<template>
  <view class="component doc-attachment-block">
    <CardView>
      <template #hd>
        <view class="card-title">
          <text class="text">单据附件</text>
          <view class="upload-area" @tap="handleUpload"
            ><text class="icon iconfont icon-a-24_24_upload"></text> 上传</view
          >
        </view>
      </template>
      <template #bd>
        <view class="card-body">
          <view class="upload-list">
            <view
              class="upload-item"
              v-for="uItem in uploadList"
              :key="uItem.name"
            >
              <view class="upload-bd">
                <view class="file-name">{{ uItem.name }}</view>
                <view class="file-desc">{{ uItem.desc }}</view>
              </view>
              <view class="upload-delete" @tap="handleDelete"
                ><view class="icon iconfont icon-a-24_24_fill_close"></view
              ></view>
            </view>
          </view>
          <view class="upload-desc"
            >支持大多数格式，文件小于100M，最多上传5个</view
          >
        </view>
      </template>
    </CardView>
  </view>
</template>

<script setup>
import CardView from '@/components/base-components/card-view/card-view.vue';

const uploadList = ref([
  {
    name: '文件名1',
    desc: '2.5M'
  },
  {
    name: '文件名2',
    desc: '2.5M'
  }
]);

// uniapp 文件上传
// uniapp 文件删除
const handleUpload = () => {
  console.log('上传');
}

const handleDelete = () => {
  console.log('删除');
}
</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";

.card-title {
  display: flex;
  justify-content: space-between;
  padding-top: 24rpx;

  .text {
    font-size: 30rpx;
    font-style: normal;
    font-weight: 500;
    line-height: 42rpx;
  }

  .batch-delete {
    font-size: 24rpx;
    line-height: 34rpx;
  }
}
.card-body {
  padding-bottom: 24rpx;
}

// 单据附件
.doc-attachment-block {
  .card-title {
    font-size: 24rpx;
  }

  .upload-desc {
    font-size: 24rpx;
    color: $text-l3-color;
  }

  // 上传
  .upload {
    &-list {
      display: flex;
      flex-direction: column;
      gap: 12rpx;
      margin-bottom: 24rpx;
    }

    &-bd {
      flex: 1;
    }
    &-delete {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24rpx;
    }

    &-item {
      display: flex;
      padding: 12rpx 24rpx;
      gap: 12rpx;
      background-color: $bg-color;

      .file {
        &-name {
          font-size: 24rpx;
          font-style: normal;
          font-weight: 500;
          line-height: 34rpx;
        }

        &-desc {
          line-height: 34rpx;
          font-size: 20rpx;
          color: $text-l3-color;
        }
      }
    }
  }
}
</style>
